<!doctype html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8" />
	<title>Vue2.0</title>
	<link rel="stylesheet" href="css/bootstrap.css" />
	<script src="js/vue.js"></script>
	<script src="js/jquery-1.11.2.js"></script>
	<style>
     body{
	background: #eee;
     }
     .computed{
	color:red;
     }
   </style>
</head>
<body> 
	 <div class="container" >
	 		<div id="app">
	                 <ul>          <!-- 点击触发toggle方法  创建当前遍历的value对象 -->     <!--  以对象的形式 计算class的值 如果当前的value.flag的真 则类名computed -->
	                     <li  v-on:click="toggle(value)"  v-for="(value,index) in message" v-bind:class="{ 'computed' : value.flag }">下标：  {{ index }} <p v-for="valuein in value">　值： {{ valuein }}</p></li>	                 
	                 </ul>
	 		 </div>
      </div>
</body>
</html>
<script>
 new Vue({
  el: '#app',
  data: {
	  message:  [
	      {body:"go to the school",flag:true},
	      {body:"go to the movie",flag:false},
	      {body:"go to the shop",flag:true}
	    ]
  },
  methods:{
	  toggle:function(value){    //这里接收一个对象 这里的对象是指每个message里的 独立变量的{}对象
		 value.flag  = ! value.flag; //改变 取反 对象里flag的值
	  }
  }
});
</script>


